/*
 * @Description: ...
 * @Author: yangli 121029539@qq.com
 * @Date: 2025-01-18 16:16:53
 * @LastEditTime: 2025-01-20 10:03:07
 * @LastEditors: yangli 121029539@qq.com
 * @FilePath: \pc\utils\postcssConfig.ts

# postcss 插件配置: postcss-px-to-viewport,nuxt3中配置px转vw
这个脚本可以将你CSS中的px单位转化为vw，1vw等于1/100视口宽度. 例如，如果你将viewportWidth设置为375px，那么100vw就等于375px。因此，如果你有一个宽度为75px的元素，它将被转换为75/375 = 20vw。
例如，如果你将viewportWidth设置为375px，那么100vw就等于375px。因此，如果你有一个宽度为75px的元素，它将被转换为75/375 = 20vw。
 
# 源scss代码段
.item {
  position: relative;
  margin: 15px 0.6%;
  padding: 12px;
  width: 23.6%;
  height: 300px;
  border-radius: 10px;
  background-color: #ffffff;
  overflow: hidden;
  transition: all 200ms linear;
}
# 在浏览器开发者模式打开查看
.content-container .content-list .news-list .item[data-v-52cd24e9] {
    position: relative;
    margin: 0.78125vw 0.6%;
    padding: 0.625vw;
    width: 23.6%;
    height: 15.625vw;
    border-radius: 0.52083vw;
    background-color: #ffffff;
    overflow: hidden;
    -webkit-transition: all 200ms linear;
    -o-transition: all 200ms linear;
    transition: all 200ms linear;
}

以 margin 为例，可以计算得出 margin-top & margin-bottom 为 15px 的值经过编译后计算得出  15 / 1920 = 0.0078125‬ ，验证后正好是设定的viewportWidth：1920视口的1/100。

1、%单位未被编译，因为我们并未设定%纳入转换的单位范围。

2、如果你不想line-height： ?? px;被纳入编译范畴，建议采用倍率，如line-height： 1.42，当然border-radius可以采用%实现；

3、如果你是使用媒体分辨查询器，记得在其他媒体下要设定好width、height、border-radius（px)、line-height、margin、padding、font-size关键属性。

4、如果你不需要把字体大小纳入编译范畴，可以配置成这样： propList: ['*', '!font*'] ，将不转换font-size以及font-weight等属性。
https://blog.csdn.net/weixin_45687201/article/details/138522632
*/

export default {
  plugins: {
     // 这个工具可以实现自动添加CSS3前缀
     autoprefixer: {
      overrideBrowserslist: ['last 5 version', '>1%', 'ie >=8'],
    },
    "postcss-px-to-viewport": {
      // 需要转换的单位，默认为"px"
      unitToConvert: "px",
 
      // 设计稿的视口宽度
      viewportWidth: 1920,
 
      // 单位转换后保留的精度
      unitPrecision: 6,
 
      // 能转化为vw的属性列表
      propList: ["*"],
 
      // 希望使用的视口单位
      viewportUnit: "vw",
 
      // 字体使用的视口单位
      fontViewportUnit: "vw",
 
      // 需要忽略的CSS选择器，不会转为视口单位，使用原有的px等单位。
      selectorBlackList: [".ignore", ".hairlines"],
 
      // 设置最小的转换数值，如果为1的话，只有大于1的值会被转换
      minPixelValue: 1,
 
      // 媒体查询里的单位是否需要转换单位
      mediaQuery: false,
      // mediaQuery: true, // 是否在媒体查询的css代码中也进行转换，默认false
 
      //  是否直接更换属性值，而不添加备用属性
      replace: true,
 
      // 忽略某些文件夹下的文件或特定文件，例如 'node_modules' 下的文件
      exclude: [/node_modules/, /dist/, /.output/, /.nuxt/, /.vscode/],
 
      // 如果设置了include，那将只有匹配到的文件才会被转换
      include: [/pages/, /assets\/styles\/*/],
 
      // landscape: false, // 是否处理横屏情况
      // 是否添加根据 landscapeWidth 生成的媒体查询条件 @media (orientation: landscape)
      landscape: false,
 
      // 横屏时使用的单位
      landscapeUnit: "vw",
 
      // 横屏时使用的视口宽度
      landscapeWidth: 1338
    }
  }
};